import { ThemeProvider, Typography, createTheme, styled } from '@mui/material'

type TSearchResult = {
	request: string
	quantity: number
}

const theme = createTheme({
	components: {
		MuiTypography: {
			styleOverrides: {
				root: {
					fontSize: '32px',
					fontVariant: 'body2',
				},
			},
		},
	},
})

const StyledSearchResult = styled('div')(() => ({
	display: 'flex',
	width: '992px',
	marginTop: '20px',
	alignItems: 'flex-start',
	flexDirection: 'row',
}))

const SearchResult = ({ request = '', quantity = 0 }: TSearchResult) => {
	if (request === '') return <></>
	const searchResult = `По запросу "${request}" найдено ${quantity} товаров.`
	return (
		<ThemeProvider theme={theme}>
			<StyledSearchResult>
				<Typography>{searchResult}</Typography>
			</StyledSearchResult>
		</ThemeProvider>
	)
}

export default SearchResult
